<template>
	<view class="cloud-info">
		<view class="cloud-info-title">
			{{data.title}}
		</view>
		<view class="cloud-info-tips flex">
			<text v-show=" data.created_at != '000000000'">发布日期：{{forDate(data.created_at)}}</text>
			<text>阅读量 ：{{data.view}}</text>
		</view>
		<view class="cloud-image">
			<image :src="data.cover" mode=""></image>
		</view>
		<view class="mt1 cloud-text">
			<u-parse :content="data.content" @preview="preview" @navigate="navigate" />
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	import uParse from '@/components/gaoyia-parse/parse.vue'
	
	export default {
		computed: {
		    ...mapState(['token'])
		},
		components: {
			uParse
		},
		data() {
			return {
				data: {
					"created_at":"000000000"
				}
			}
		},
		onLoad(event) {
			// #ifdef H5
				
				if(event.article_id){
					this.data.id = event.article_id
				}
				
			// #endif
			// #ifdef APP-PLUS
				// TODO 后面把参数名替换成 payload
				const payload = event.detailDate || event.payload;
				// 目前在某些平台参数会被主动 decode，暂时这样处理。
				try {
					this.data = JSON.parse(decodeURIComponent(payload));
				} catch (error) {
					this.data = JSON.parse(payload);
				}
				uni.setNavigationBarTitle({
					title: this.data.title
				});
			// #endif
			
			this.getinfo()
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			preview(src, e) {
			  console.log(src)
			},
			navigate(href, e) {
				console.log(href)
			  // do something
			},
			forDate(time) {
				let date = new Date(time * 1000); 		//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = this.change(date.getDate()) + ' ';
				let h = this.change(date.getHours()) + ':';
				let m = this.change(date.getMinutes()) + ':';
				let s = this.change(date.getSeconds());
				return Y + M + D + h + m + s;
			},
			change(t) {
				if (t < 10) {
					return "0" + t;
				} else {
					return t;
				}
			},
			getinfo(){
				this.vuexRequest({
					url: '/api/addons/execute?route=article/view&addon=rf-article',
					method: 'GET',
					data: {id:this.data.id},
					success: (res)  => {
						this.data = res.data.data
						uni.setNavigationBarTitle({
							title: this.data.title
						});
					},
					fail: (err)  => {
					},
				})
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.cloud-info{
		padding: 20upx;
		
	}
	.cloud-info-title{
		font-size: 40upx;
		line-height: 1.4;
	}
	.cloud-info-tips{
		color: #7b7b7b;
		padding: 10upx 0;
		font-size: 24upx;
	}
	.cloud-text,.cloud-text view{
		font-size: 32upx !important;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.mt1{
		margin-top: 20upx;
	}
	.cloud-image{
		margin: 20upx 0 0 0;
		display: none;
	}
	.cloud-image image{
		width: 710upx;
		height: 398upx;
	}
</style>	
